<template>
	<ele-modal :width="1150" :visible="visible" :confirm-loading="loading"
		:title="'操作日志'" :body-style="{ paddingBottom: '8px' }"
		@update:visible="updateVisible" :footer="null">
		<a-form :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
			:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
			<a-row :gutter="24">
				<a-col :md="8" :sm="8" :xs="8">
					<div class="border">
						<vxe-table ref="goodsTable" align="center" :data="list" :row-config="{isCurrent: true, isHover: true}" @current-change="currentChangeEvent">
						  <vxe-column field="create_time" title="时间" />
						  <vxe-column field="tenant_no" title="操作人" />
						</vxe-table>
						<div class="margin-top-15">
						  <vxe-pager
						    size="mini"
						    :current-page="tablePage.currentPage"
						    :page-size="tablePage.pageSize"
						    :total="tablePage.total"
						    :layouts="[
						      'PrevPage',
						      'JumpNumber',
						      'NextPage',
						      'Total'
						    ]"
						    @page-change="handlePageChange"
						  />
						</div>
					</div>
				</a-col>
				<a-col :md="16" :sm="16" :xs="16">
					<div class="border padding-top-15">
						<a-form :label-col="{ md: { span: 3 }, sm: { span: 4 }, xs: { span: 24 } }"
							:wrapper-col="{ md: { span: 21 }, sm: { span: 20 }, xs: { span: 24 } }">
							<a-row :gutter="24">
								<a-col :md="24" :sm="24" :xs="24">
									<a-form-item label="等级数量">
										<a-select style="width: 60%" show-search optionFilterProp="label" :options="gradeOptions"
											allow-clear placeholder="请选择" v-model:value="from.count" disabled />
									</a-form-item>
									<a-form-item label="升级方式">
										<a-radio-group v-model:value="from.up_type" disabled>
											<a-radio :value="1">人工升级</a-radio>
											<a-radio :value="2">累计消费金额自动升级</a-radio>
											<a-radio :value="3">累计积分值自动升级</a-radio>
										</a-radio-group>
									</a-form-item>
								</a-col>
								<a-col :md="24" :sm="24" :xs="24">
									<vxe-table ref="xTable" :data="tableData">
										<vxe-column field="level" title="会员等级" width="200">
											<template #default="{ row }"><div>{{row.level}}级</div></template>
										</vxe-column>
										<vxe-column field="name" title="等级名称">
											<template #default="{ row }">
												<a-input placeholder="请输入" type="text" v-model:value="row.name" disabled></a-input>
											</template>
										</vxe-column>
										<vxe-column field="total_consum" title="累计消费金额自动升级" v-if="from.up_type==2">
											<template #default="{ row }">
												<a-input placeholder="请输入" type="number" v-model:value="row.total_consum" disabled></a-input>
											</template>
										</vxe-column>
										<vxe-column field="total_points" title="累计积分值自动升级" v-if="from.up_type==3">
											<template #default="{ row }">
												<a-input-number v-model:value="row.total_points" style="width:200px" disabled />
											</template>
										</vxe-column>
									</vxe-table>
								</a-col>
								<a-col :md="24" :sm="24" :xs="24" v-if="from.up_type == 2 || from.up_type == 3">
									<a-form-item>
										<div class="fs-16 fw-bolder padding-left-10">降级设置</div>
									</a-form-item>
									<a-form-item label="销售退货">
										<a-radio-group v-model:value="from.refund_down" disabled>
											<a-radio :value="1">不降级（扣减累计消费金额和累计积分，保持原等级不变）</a-radio>
											<a-radio :value="2">自动降级（扣减累计消费金额和累计积分，按当前规则更新等级）</a-radio>
										</a-radio-group>
									</a-form-item>
									<a-form-item label="取消订单">
										<a-radio-group v-model:value="value" disabled>
											<a-radio :value="1">自动降级（扣减累计消费金额和累计积分，按当前规则更新等级）</a-radio>
										</a-radio-group>
									</a-form-item>
								</a-col>
							</a-row>
						</a-form>
					</div>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue';
	import dayjs from 'dayjs';
	import {Form} from 'ant-design-vue';
	import {uploadUrl} from '@/config/setting';
	import {emailReg,phoneReg,identityReg} from 'ele-admin-pro';
	import {PlusOutlined,LoadingOutlined} from '@ant-design/icons-vue';
	import { get_address } from '@/api/tenant/store';
	import { get_role_select } from '@/api/material/select';
	import { member_level_get_setting, setting_log } from '@/api/member/get_setting';
	import { detail } from '@/api/member/get_list';


	const emit = defineEmits(['done', 'update:visible']);
	
	const visible = ref(false);
	const loading = ref(false);
	const tablePage = reactive({
	  total: 0,
	  currentPage: 1,
	  pageSize: 10,
	});
	const list = ref([]);
	
	const gradeOptions = ref([
		{label: '2个',value: 2},
		{label: '3个',value: 3},
		{label: '4个',value: 4},
		{label: '5个',value: 5},
		{label: '6个',value: 6},
		{label: '7个',value: 7},
		{label: '8个',value: 8},
		{label: '9个',value: 9}
	]);
	const data = ref({});
	const show = ref(false);
	const logShow = ref(false);
	const value = ref(1);
	const tableData = ref([]);
	const level = ref([]);
	const from = reactive({
		count:'',
		up_type:1,
		refund_down:'',
		level:[]
	})
	
	
	
	const handlePageChange = ({ currentPage, pageSize }) => {
	  tablePage.currentPage = currentPage;
	  tablePage.pageSize = pageSize;
	  getList(currentPage, pageSize);
	};
	
	const currentChangeEvent = (data)=>{
		Object.keys(from).map(key=>{
			from[key] = data.row[key] ? data.row[key] : '';
		})
		tableData.value = data.row.level;
		console.log('index=', from);
	}

	onMounted(() => {
		getList();
	});
	const getList = ()=>{
		setting_log({page:tablePage.currentPage,page_size:tablePage.pageSize }).then((res) => {
			tablePage.total = res.data.total;
			if(res.data.data && res.data.data.length > 0){
				list.value = res.data.data;
				Object.keys(from).map(key=>{
					from[key] = list.value[0][key] ? list.value[0][key] : '';
				})
				tableData.value = list.value[0].level;
				console.log('index=', from);
			}
		})
	}
	/* 更新visible */
	const updateVisible = (value) => {
		emit('update:visible', value);
	};
</script>
<style lang="less" scoped>
	.border{
		border: 1px solid #f5f5f5;
	}
</style>